<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
		<title>搜索</title>
		<link rel="stylesheet" href="../../css/media.css" />
		<link rel="stylesheet" href="../../css/common.css" />
		<link rel="stylesheet" href="../../css/style.css" />
	</head>
	<body>
		<div class="hotnews_search">
			<h3>搜索</h3>
			<div class="searchdiv">
				<input type="text" placeholder="搜索话题" id="searchInput" oninput="changeFunc(this)"/>
				<span class="delete none" id="searchDel">&times</span>
				<span class="cancel">取消</span>
			</div>
			<div class="hotsearch content">
				<div class="title">热门搜索</div>
				<ul>
					<li>绘画<span class="del">&times</span></li>
					<li>沙水<span class="del">&times</span></li>
					<li>光影<span class="del">&times</span></li>
					<li>假想<span class="del">&times</span></li>
					<li>自由玩耍<span class="del">&times</span></li>
					<li>大／精细动作<span class="del">&times</span></li>
					<li>艺术<span class="del">&times</span></li>
				</ul>
			</div>
			<div class="historysearch content">
				<div class="title">历史搜索<span class="clear">清空</span></div>
				<ul>
					<li>绘画</li>
					<li>沙水</li>
					<li>光影</li>
					<li>假想</li>
					<li>自由玩耍</li>
					<li>大／精细动作</li>
					<li>艺术</li>
					<li>数字</li>
					<li>语言</li>
					<li>零碎物件</li>
				</ul>
			</div>
		</div>
		<script src="../../js/jquery.min.js"></script>
		<script type="text/javascript">
			$(function () {
				$("#searchDel").click(function(){
					$("#searchInput").val("");
					$("#searchDel").addClass("none")
				})
				$(".del").click(function(){
					$(this).parent().remove()
				})
				$(".clear").click(function(){
					$(this).parent().next().children().remove()
				})
			})
			function changeFunc(s){
				$(s).val() ? $("#searchDel").removeClass("none") : $("#searchDel").addClass("none")
			}
		</script>
	</body>
</html>
